import React, { Component } from 'react';
import {
  Chart,
  LineAdvance,
  Legend,
  Axis
} from 'bizcharts';
import { connect } from 'umi'
import { Empty } from 'antd'
import { isValueEmpty, formatterUnitOfData, isDecimal } from '@/utils/utils'
import styles from '../index.less'

@connect(({ commerBuild }) => ({
}))
export default class LineArea extends Component {
  constructor() {
    super()
  }

  render() {
    const { dataRow = [], valueName, staticts, axisName = 'time_value', minNumber = 0, isToFixed = true, tooltipName } = this.props

    const scale = {
      [valueName]: {
        min: minNumber,
        formatter: (val) => {
          const { value, unit } = formatterUnitOfData(staticts, val, isToFixed)
          if (value) {
            return value + unit.slice(0, -1);
          }
          return 0
        }
      }
    }

    const positionStr = `${axisName}*${valueName}`
    return (
      <>
        {isValueEmpty(valueName, dataRow) ?
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> :
          <Chart autoFit data={dataRow} scale={scale} appendPadding={[18, -10, 0, 0]}>
            <LineAdvance
              shape="smooth"
              point
              area
              color="#00C0E3"
              position={positionStr}
              tooltip={[positionStr, (x, y) => {
                const {value, unit} = formatterUnitOfData(staticts, y)
                return {
                  name: tooltipName || staticts,
                  value: value ? value + (tooltipName == '去化周期' ? '个月' : unit) : 0
                };
              }]}
              label={[valueName, (xValue) => {
                if(!xValue) return ''
                const isVeryBig = xValue > 100000
                let content = null
                if(isVeryBig){
                  const {value, unit} = formatterUnitOfData(staticts, xValue)
                  content = value + unit.slice(0, -1)
                }else {
                  content = isDecimal(xValue) ? xValue.toFixed(2) : xValue
                }
                return {
                    content: content,
                    style: {
                      fill: '#b1b1b1',
                      fontWeight: '100',
                      fontSize: 12
                    },
                    layout: {
                      type: 'fixedOverlap',
                    }
                  };
                }
              ]}
            />
            <Axis
              name={axisName}
              label={{ autoRotate: false }}
            />
            <Axis
              name={valueName}
              grid={false}
            />
          </Chart>
        }
      </>
    )
  }
}
